<template>
  <div class='layout-aside'>
     <!-- 头部图片 -->
     <div class='title'>
         <!-- 如果img是动态的 你需要把地址转变成变量 -->
         <!-- 如果是折叠 用小图 如果是展开 用大图 -->
         <!-- <img :src="collapse ? smallImg : bigImg" alt=""> -->
         <img :src="smallImg" alt="">
         <span v-if="!collapse" style="color: #ffffff;margin-left: 10px;">管理平台</span>
     </div>
     <!-- 导航菜单 开启路由模式 :router="true"(完整模式) router(简写模式)  -->
     <el-menu :collapse="collapse"  default-active="1" router :unique-opened="true" background-color="#323745" text-color="#adafb5">
         <!-- 子菜单 没有子菜单的 用 el-menu-item标签 -->
         <el-menu-item index='/home'>
             <i class='el-icon-s-home'></i>
             <span>首页</span>
         </el-menu-item>
         <!-- 二级菜单 需要用submenu -->
         <el-submenu index="148866">
             <template slot="title">
                <i  class='el-icon-s-grid'></i>
                <span >日常管理</span>
             </template>
             <!-- 匿名插槽是二级菜单  具名插槽title是一级菜单-->
             <!-- 二级菜单项 还是使用el-menu-item -->
             <el-menu-item index='/home/Institutional'>机构管理</el-menu-item>
             <el-menu-item index='/home/Teacher'>教师管理</el-menu-item>
             <el-menu-item index='/home/Teaching'>教学点管理</el-menu-item>
             <el-menu-item index='/home/Course'>课程管理</el-menu-item>
             <el-menu-item index='/home/materials'>教材管理</el-menu-item>
             <el-menu-item index='/home/Monitoring'>视频监控</el-menu-item>
             <el-menu-item index='/home/Finance'>财务人员管理</el-menu-item>
             <!-- <el-menu-item index='/home/FiledunderInfo'>建档信息管理</el-menu-item> -->
             <el-menu-item index='/home/Contract'>合同管理</el-menu-item>
             <el-menu-item index='/home/Order'>订单管理</el-menu-item>

         </el-submenu>
          <el-submenu index="3644">
              <template slot="title">
                <i class='el-icon-s-opportunity'></i>
                <span>预警管理</span>
              </template>
            <!-- 二级菜单项 还是使用el-menu-item -->
            <el-menu-item index='/home/EarlyWarning'>预警信息</el-menu-item>
            <el-menu-item index='/home/Funds'>资金预警</el-menu-item>
            <el-menu-item index='/home/Credit'>信用预警</el-menu-item>
            <el-menu-item index='/home/Account'>账户监管</el-menu-item>
        </el-submenu>
        <!-- <el-menu-item index='/home/account'>
            <i class="el-icon-user-solid"></i>
            <span>系统管理</span>
        </el-menu-item> -->
        <el-submenu index="49884">
          <template slot="title">
            <i class='el-icon-setting'></i>
            <span>系统管理</span>
          </template>
          <!-- 二级菜单项 还是使用el-menu-item -->
          <el-menu-item index='/home/AgencyAccount'>机构账户管理</el-menu-item>
          <!-- <el-menu-item index='/home/SystemConfiguration'>系统配置</el-menu-item> -->
          <!-- <el-menu-item index='/home/ExceptionMsg'>异常数据</el-menu-item> -->
          <el-menu-item index='/home/UserManagement'>用户管理</el-menu-item>
        </el-submenu>
     </el-menu>
  </div>
</template>

<script>
export default {
  props: ['collapse'], // 接收父组件传出来的变量
  data () {
    return {
      // bigImg: require('../../assets/img/logo_admin.png'),
      smallImg: require('../../assets/img/toutiao.png')
    }
  }
}
</script>

<style lang='less' scoped>
  .layout-aside {
      background-color: #2e2f32;
    //   width:230px;
      height: 100vh;
      .title {
          text-align: center;
          padding: 10px 0;
          img {
              height: 35px;
          }
      }
      .el-menu {
          border-right: none;
      }
  }
</style>
